<template>
  <div class="box">
    <div class="card-container">
      <div class="header">
      <el-row :gutter="10">
        <el-form :model="queryParams" label-width="100px" ref="queryForm" :inline="true" v-show="showSearch">
          <el-col :span="21" :offset="0">
            <el-form-item label="" prop="variable">
              <el-select v-model="queryParams.variable" placeholder="请选择">
                <el-option v-for="item in dict.type.time_delay" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button  @click="handleQuery">开始统计
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="0">
          </el-col>
        </el-form>
      </el-row>
    </div>
    </div>
   
    <div class="card-container">
      <div class="body">
        <div class="body-title">
          <div class="body-title-left">
            <dict-tag :options="dict.type.time_delay" :value="variable" />
            延时统计
          </div>
        </div>
        <el-table v-loading="loading" :row-key="getRowKeys" ref="table" :data="deviceList">
          <!-- :selectable="checkSelectable" @selection-change="handleSelectionChange" -->
          <!-- <el-table-column type="selection" width="55" align="center" :reserve-selection="true" /> -->
          <el-table-column label="延时分类" width="120" show-overflow-tooltip align="center" prop="category" />
          <el-table-column label="台站数" width="120" show-overflow-tooltip align="center" prop="count" />
          <el-table-column label="设备标识" min-width="200" align="left" prop="device" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" v-show="scope.row.device.length > 0 && scope.row.category != '无数据'"
                @click="handleDetails(scope.row)">
                详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
      </div>
    </div>

    <el-dialog title="详情" :close-on-click-modal="false" :visible.sync="open" width="80%">
      <div class="card-container">
        <el-table v-loading="loading" height="680" ref="table" :data="detailList">
        <el-table-column prop="projectName" align="center" show-overflow-tooltip label="项目名称" min-width="90" />
        <el-table-column prop="deviceCode" align="center" show-overflow-tooltip label="设备序列号" min-width="125">
        </el-table-column>
        <el-table-column prop="deviceType" align="center" show-overflow-tooltip label="设备类型" min-width="80">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_device_mode" :value="scope.row.deviceType" />
          </template>
        </el-table-column>
        <el-table-column prop="deviceModel" align="center" show-overflow-tooltip label="设备型号" min-width="80" />
        <el-table-column prop="address" align="center" show-overflow-tooltip label="安装位置" min-width="250" />
        <el-table-column prop="timeDelay" align="center" show-overflow-tooltip label="服务实际延时(s) " min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.timeDelay == null ? '-' : (scope.row.timeDelay / 1000).toFixed(5) }}</span>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, getDetailList } from '@/api/timeDelay/timeDelay.js';
import moment from 'moment';
export default {
  name: 'timeDelay',
  dicts: ['time_delay',"sys_device_mode"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备管理表格数据
      deviceList: [],
      // 查询参数
      queryParams: {
        variable: '1',
        startTime: null,
        endTime: null
      },
      detailList: [],
      variable: '1',
      open: false
    };
  },
  created() {
    console.log(moment().subtract(1, 'minutes').format('x'))
    // this.getList();
  },
  activated() {
    // this.getList();
  },
  computed() {

  },
  mounted() {
    this.getList();
  },
  components: {},
  methods: {
    /** 查询设备管理列表 */
    getList() {
      this.loading = true;
      this.queryParams.startTime = moment().subtract(Number(this.queryParams.variable), 'minutes').format('x')
      this.queryParams.endTime = moment().format('x')
      getList(this.queryParams.startTime, this.queryParams.endTime).then(async (response) => {
        this.deviceList = response.data;
        // this.total = response.total;
        this.loading = false;
      });
    },
    getRowKeys(row) {
      return row.deviceId;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.variable = this.queryParams.variable
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    },
    handleDetails(row) {
      getDetailList(this.queryParams.startTime, this.queryParams.endTime, row.device).then(async (response) => {
        this.open = true
        this.detailList = response.data;
        // this.total = response.total;
        console.log(response, 'response')
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.header {
  padding: 12px 12px 0 12px;
  // height: 64px;
  // background: rgba(0, 0, 0, 0.02);
  border-radius: 5px;
}

.body {
  margin-top: 10px;
  // background: #ffffff;
  border-radius: 5px;
  // height: 770px;
  // padding: 0 20px 20px 20px;
}

.body-title {
  display: flex;
  position: relative;
  // justify-content: space-between;
  align-items: center;
}

.body-title-left {
  display: flex;
  height: 100%;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #fff;
  line-height: 40px;
}

.body-title-right {
  position: absolute;
  right: 0;
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

::v-deep input[type='number'] {
  -moz-appearance: textfield !important;
  // appearance: textfield !important;
}

::v-deep .sysDialog:not(.is-fullscreen) {
  margin-top: 24vh !important;
}

.sysBox {
  padding: 0 20px;

  >span {
    >i {
      font-style: normal;
      color: #409eff;
    }
  }

  .sysList {
    margin: 0;
    padding: 0;
    margin-top: 10px;
    height: 200px;
    overflow-y: auto;

    >li {
      list-style: none;
      padding: 0px 20px;
      height: 40px;
      line-height: 40px;
      background: rgba(144, 147, 153, 0.2);
      display: flex;

      div {
        flex: 1;

        &:nth-child(2) {
          color: red;
        }
      }
    }

    >li:nth-child(2n) {
      background: rgba(144, 147, 153, 0.5);
    }
  }
}
</style>